<template>
  <div class="container-coupon-card">
    <div class="coupon">
      <!--上半部分-->
      <div class="top" :style="{
        height: topHeight,
        background: `
        radial-gradient(circle at left bottom, transparent 8px, ${primaryBgColor} 0, ${getGradientColor} 50%) top left /calc(100% - 8px) 100% no-repeat,
        radial-gradient(circle at right bottom, transparent 8px, ${primaryBgColor} 0, ${getGradientColor} 0) top right /calc(100% - 8px) 100% no-repeat
        `
      }">
        <div class="content">
          <template v-if="diyContent">
            <slot name="diyContent"></slot>
          </template>
          <template v-else>
            <div class="left">
              <slot name="top-left"></slot>
            </div>
            <div class="right">
              <div class="title" :style="{color: titleColor}">{{ title }}</div>
              <div class="sub-title" :style="{color: subTitleColor}">{{ subTitle }}</div>
            </div>
          </template>
        </div>
        <div v-show="showWaterText" class="water-text-box"
             :style="{border: `${waterTextColor} solid 1.5px`, color: waterTextColor}">
          <div class="inner-circle" :style="{border: `${waterTextColor} solid 1px`}"><span>{{ waterText }}</span></div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="bottom" :style="{height: bottomHeight}">
        <div class="content">
          <slot name="bottom"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CouponCard",
  props: {
    // 主要标题
    title: {
      type: String,
      default: ''
    },
    // 主要标题颜色
    titleColor: {
      type: String,
      default: '#fff'
    },
    // 描述文字
    subTitle: {
      type: String,
      default: '#fff'
    },
    // 描述文字颜色
    subTitleColor: {
      type: String,
      default: '#fff'
    },
    // 是否显示右上角水印
    showWaterText: {
      type: Boolean,
      default: true
    },
    // 右上角水印
    waterText: {
      type: String,
      default: ''
    },
    // 右上角水印颜色
    waterTextColor: {
      type: String,
      default: '#fff'
    },
    // 主要背景颜色
    primaryBgColor: {
      type: String,
      default: ''
    },
    // 主要背景颜色
    primaryBgColor2: {
      type: String,
      default: ''
    },
    // 是否自定义内容
    diyContent: {
      type: Boolean,
      default: false
    },
    topHeight: {
      type: String,
      default: '115px'
    },
    bottomHeight: {
      type: String,
      default: '55px'
    }
  },
  computed: {
    getGradientColor() {
      return this.primaryBgColor2 ? this.primaryBgColor2 : this.primaryBgColor;
    }
  }
}
</script>

<style lang="scss" scoped>

.container-coupon-card {
  width: 100%;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .12));
  margin-top: 20px;
  overflow: hidden;

  .coupon {
    overflow: hidden;
    width: 100%;

    .top {
      width: 100%;
      height: 115px;
      background: radial-gradient(circle at left bottom, transparent 8px, #28A4F2 0) top left /calc(100% - 10px) 100% no-repeat,
      radial-gradient(circle at right bottom, transparent 8px, #28A4F2 0) top right /calc(100% - 10px) 100% no-repeat;
      border-radius: 4px;
      overflow: hidden;

      .content {
        width: 100%;
        height: 72%;
        position: absolute;
        display: flex;

        .left {
          display: flex;
          flex: 2;
          justify-content: center;
          align-items: center;
        }

        .right {
          display: flex;
          flex-direction: column;
          flex: 3;
          justify-content: center;
          align-items: flex-start;
          line-height: 2;

          .title {
            color: #fff;
          }

          .sub-title {
            color: rgba(255, 255, 255, .8);
            font-family: PingFangLight;
            font-size: 0.8rem;
          }
        }
      }

      .water-text-box {
        opacity: 0.3;
        position: absolute;
        display: flex;
        top: -5px;
        right: -5px;
        width: 60px;
        height: 60px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: solid #fff 1.5px;
        color: #fff;
        transform: rotate(30deg);

        .inner-circle {
          width: 90%;
          height: 90%;
          font-size: 0.8rem;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          display: flex;
          border: solid #fff 1px;

          span {
            transform: scale(0.8);
          }
        }
      }
    }

    .bottom {
      width: 100%;
      height: 55px;
      background: radial-gradient(circle at left top, transparent 8px, #fff 0) bottom left /calc(100% - 10px) 100% no-repeat,
      radial-gradient(circle at right top, transparent 8px, #fff 0) bottom right /calc(100% - 10px) 100% no-repeat;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;

      &::after {
        position: absolute;
        content: "";
        top: -2px;
        width: calc(100% - 24px);
        border-top: 4px dotted #fff;
      }

      .content {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }
}

</style>


